<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

    <style type="text/css">


        #contents {
            min-height: 550px;
            /*background: lightsalmon;*/
        }

        .contentsHeader {
            padding-top: 40px;
        }

        .log {
            font-size: 300%;
            font-weight: bold;
        }

        .wel {
            font-size: 110%;
        }

        .joinContents {
            /*background: lightslategrey;*/
            width: 850px;
            margin: 100px 60px;
        }

        table {
            margin: 0 auto;
            width: 850px;
            border-top: 2px solid #1C81BC;
            border-bottom: 2px solid #1C81BC;

        }

        th, td {
            height: 70px;
            border-collapse: collapse;
        }

        #joinfrm input, #domain {
            margin-top: 5px;
            margin-left: 6px;
            font-family: "나눔바른고딕";
            height: 30px;
        }

        #zipbtn1, #capbtn, #joinbtn, #resetbtn{

            height: 32px;
            color: white;
            background: #1C81BC;
            font-family: "나눔바른고딕";
            margin-bottom:3px;
        }

        #joinfrm p {
            font-size: 13px;
            margin-left: 6px;
        }

        .tabletd {
            background: lightgoldenrodyellow;
        }

        label {
            margin-left: 5px;
        }

        .privacyChk {
            background: lightgrey;
            height: 50px;

        }

        .privacyChk label {
            margin-top: 12px;
        }

        .privacySumm {
            border: 1px solid black;
            margin: 10px 0;
            display: none;
        }
       #plus{
           width:30px;
           height:30px;
           margin-top:-3px;
       }

        #privacyAgree {
            margin-top:-3px;
        }
    </style>


<!-- contents -->
<div id="contents" class="row">
    <div class="contentsHeader">
        <span class="log">회원가입</span>
        <span class="wel">&nbsp;&nbsp;&nbsp;SING에 오신 것을 환영합니다.</span>
    </div>

    <div class="joinContents">
        <div>
            <h4>개인정보 수집 및 이용에 대한 동의</h4>
            <p>회원가입을 위해서 개인정보 수집 및 이용에 대한 안내를 읽고 동의해 주세요</p>
            <div class="privacyChk form-inline">
                <input type="checkbox" name="privacyAgree" id="privacyAgree"/>
                <label for="privacyAgree">개인정보 수집에 대한 동의</label>
                <div class="intro" style="float:right; margin-top:5px;">
                    <label>내용확인</label>
                    <img id="plus" src="images/plus.png"/>
                </div>
            </div>

            <div class="privacySumm">
                <dl>
                    <dt> 개인정보 수집 및 이용에 대한 동의</dt>
                    <dd>
                        <ol>
                            <li>1. 수집 항목 및 이용 목적
                                <ol>
                                    <li>1.1. 회원가입
                                        <ol>
                                            <li>- 수집항목: 이메일, 보조이메일, 비밀번호, 성명(국문/영문), 휴대폰번호, 생년월일</li>
                                            <li>- 수집목적: 회원관리(회원제 서비스 이용에 따른 본인확인, 개인 식별, 불량 회원의 부정 이용 방지와 비인가 사용 방지, 가입
                                                의사
                                                확인, 가입 및 가입횟수 제한, 고지사항 전달), 입사 지원 시 서비스 제공
                                            </li>
                                        </ol>
                                    </li>
                                    <li>1.2. 입사지원
                                        <ol>
                                            <li>- 수집항목(필수): 성별, 국적, 추가 연락처</li>
                                            <li>- 수집항목(선택): 장애정보, 보훈정보, 경력사항, 어학 등 자격 사항, 주소, 병역사항, 학력사항, 저소득층 여부, 계좌번호,
                                                사진,
                                                자기소개서, 인/적성 결과, 신체검사 결과
                                            </li>
                                            <li>- 수집목적: 채용 적합성 판단 및 서류 심사/면접 등의 근거 자료, 인력풀 활용, 면접비 지급</li>
                                        </ol>
                                    </li>
                                    <li>1.3. 자동수집
                                        <ol>
                                            <li>- 수집항목: 회사별 응시여부, 시스템사용내역, 쿠키, 접속로그, 접속IP, 통계데이터</li>
                                            <li>- 수집목적: 과다 지원 방지, 정상적인 접속경로 확인 및 입사 지원 서비스 제공</li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                            <li>2. 개인정보의 보유 및 이용기간
                                <ol>
                                    <li>2.1. 일반회원 정보 보유기간: 탈퇴 후 1년</li>
                                    <li>2.2. 지원자 정보 보유기간
                                        <ol>
                                            <li>2.2.1. 최종 전형 합격자
                                                <ol>
                                                    <li>- 입사자: 영구</li>
                                                    <li>- 입사 예정자: 영구</li>
                                                    <li>- 입사 포기자: 입사 포기 시점 3년</li>
                                                </ol>
                                            </li>
                                            <li>2.2.2. 최종 전형 합격자 外
                                                <ol>
                                                    <li>- 전형 탈락 시점 3년</li>
                                                </ol>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                            <li>3. 지원자는 개인정보 수집에 동의하지 않을 권리가 있습니다. 다만, 상기 개인정보를 제공하지 않으실 경우 회사는 공정한 채용을 진행할 수 없기 때문에 지원에
                                제한이
                                있을 수 있습니다.
                            </li>
                        </ol>
                    </dd>
                </dl>
            </div>

        </div>

        <form method="post" id="joinfrm" name="joinfrm">
            <h4>기본회원정보입력</h4>
            <table border="1" frame="void" bordercolor="#1C81BC">
                <tr>
                    <td class="tabletd"><label>아이디</label></td>
                    <td colspan="3"><input type="text" placeholder="아이디" class="span3" id="userid"/></td>
                    <span id="uidmsg"></span>
                </tr>
                <tr>
                    <td class="tabletd"><label>이름</label></td>
                    <td><input type="text" placeholder="이름" class="span3" id="name"/>
                        <span id="namemsg"></span>
                    </td>
                    <td class="tabletd"><label>닉네임</label></td>
                    <td><input type="text" placeholder="닉네임" class="span3" id="nickname"/></td>
                </tr>
                <tr>
                    <td class="tabletd"><label>생년월일</label></td>
                    <td><input type="text" placeholder="YYMMDD" class="span3" id="birth"/></td>
                    <td class="tabletd"><label>성별</label></td>
                    <td><input type="text" placeholder="성별" class="span3" id="gender"/>

                        <p>성별은 남,여로 기입해 주세요.</p>
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>핸드폰번호</label></td>
                    <td colspan="3"><input type="text" class="span3" id="hp"/>

                        <p>'-'없이 숫자만 입력해 주세요.</p>
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>비밀번호</label></td>
                    <td colspan="3"><input type="password" class="span3" id="passwd"/>

                        <p>비밀번호는 특수문자 및 영문과 숫자를 포함하여 8자 이상, 12자 이하로 설정해주시기 바랍니다.(허용특수문자:~!#$%^*)</p>
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>비밀번호확인</label></td>
                    <td colspan="3"><input type="password" class="span3" id="repasswd"/>
                        <span id="pwdmsg"></span>
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>이메일</label></td>
                    <td colspan="3">
                        <select id="domain" name="domain">
                            <option value="in">직접입력</option>
                            <option value="daum.net">daum.net</option>
                            <option value="empal.com">empal.com</option>
                            <option value="freechal.com">freechal.com</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="hanmail.net">hanmail.net</option>
                            <option value="hotmail.com">hotmail.com</option>
                            <option value="korea.com">korea.com</option>
                            <option value="nate.com">nate.com</option>
                            <option value="naver.com">naver.com</option>
                        </select>
                        <input type="text" id="emailAddress" name="emailAddress" size="25" placeholder="아이디"/>
                        <input type="text" id="emailDomain" name="emailDomain" size="25" placeholder="@도메인" />
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>우편번호</label></td>
                    <td colspan="3"><input type="text" name="zip1" id="zip1" class="span1"> - <input type="text"
                                                                                                     class="span1"/>
                        <button type="button" class="btn btn-navbar" id="zipbtn1">우편번호찾기</button>
                    </td>
                </tr>
                <tr>
                    <td class="tabletd"><label>주소</label></td>
                    <td colspan="3"><input type="text" name="addr" id="addr" class="span4"/>
                        <input type="text" name="etcaddr" id="etcaddr" class="span3"/></td>
                </tr>
                <tr>
                    <td class="tabletd"><label>자동가입방지</label></td>
                    <td colspan="3"><img src="<c:url vlaue='/Captcha.do'/>"/><br/>
                        <input type="text" name="captcha" id="captcha" class="span4"/>
                        <button type="button" class="btn btn-navbar" id="capbtn">확인</button>
                        <p>자동가입방지 문자를 입력해 주세요</p>
                    </td>
                </tr>
            </table>

            <div class="sucbtn" style="float:right; margin-top:10px">
                <button type="reset" class="btn btn-navbar" id="resetbtn" >다시입력</button>
                <button type="button" class="btn btn-navbar" id="joinbtn" >가입완료</button>
            </div>
            <input type="hidden" id="uidchk" value="n">
            <input type="hidden" id="pwdchk" value="n">
            <input type="hidden" id="captchk" value="n">
        </form>
    </div>
</div>
</div>


